<template>
	
	<view>
        <view class="status_bar"></view>
		<view class="top">
			<view class="pai">一拍即合</view>

			<uni-search-bar style="width: 400rpx;margin-top: 20rpx;margin-right: 20rpx;" v-model="searchValue" placeholder="感兴趣的话题" @confirm="onsearch" cancelButton="none"></uni-search-bar>


		</view>

		<view class="navi">
			<u-grid :col="4" :border="false"  @click="toNav">
				<u-grid-item >
					<image class="gn-icon" src="/static/partner/learn.png"> </image>
					<view class="grid-text" style="font-size: 24rpx;">学习</view>
				</u-grid-item>
				<u-grid-item >
					<image  class="gn-icon" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/a3ac2bb51a3f43e6bb2429e0d5c90617leisure.png"></image>
					<view class="grid-text" style="font-size: 24rpx;">休闲娱乐</view>
				</u-grid-item>
				<u-grid-item >
					<image class="gn-icon" src="/static/partner/travel.png"></image>
					<view class="grid-text" style="font-size: 24rpx;">旅行</view>
				</u-grid-item>
				<u-grid-item >
					<image  class="gn-icon" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/1843cba9f69745419e21610ea2b55a3dinterest.png"></image>
					<view class="grid-text" style="font-size: 24rpx;">兴趣爱好</view>
				</u-grid-item>	
			</u-grid>
			
		</view>
		 <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<StarPostList :list="postList" :option="postOption" @selectPost="selectPost" @longpressPost="longpressPost"
				@clickUserAvatar="clickPostUserAvatar" @clickUserNickname="clickPostUserNickname"
				@clickFocusUser="clickPostFocusUser" @clickChatUser="clickPostChatUser" @clickMore="clickMore"
				@clickSharePost="clickSharePost" @clickCommentPost="clickCommentPost" @toggleLike="togglePostLike" @changeImg="changeImg">
			</StarPostList>
		</mescroll-body>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 400rpx;height: 300rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
			<view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">是否前往聊天界面沟通寻搭细节</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import StarPostList from '@/uni_modules/star-community/components/star-post-list/star-post-list.vue'
	
	export default {

		mixins: [MescrollMixin], // 使用mixin
		components: {
			StarPostList,
		},

	


	    onShow(options) {
			if (!uni.getStorageSync("hasLogin")) {
					this.$u.toast('请先登录哦');
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				// this.show=false
				this.userInfo = uni.getStorageSync("userInfo")
		},


		data() {
			return {
				patdetail:'',
				count: 0,
				codeUrl: '',
				downOption: {
					use: false, // 不启用mescroll下拉刷新，使用页面原生下拉刷新
				},
				userInfo:{},
				upOption: {
					isBounce: false,
					noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					page: {
					        size: 10 // 每页数据的数量
					                    },

					// toTop: {
					// 	right: '20rpx',
					// 	bottom: '140rpx',
					// 	safearea: true,
					// 	width: '80rpx',
					// 	radius: '50%',
					// 	btnClick: return true,
					// }
				},
				page: 1,
				postList: [],
				list: [],
				List:[],
				postOption: {
					lineShow: 4, // 文本超出多少行显示省略号
					// iconShare: '/static/share.svg',
					// iconView: '/static/view.svg',
					// iconComment: '/static/comment.svg',
					// iconLike: '/static/like.svg',
					// iconLiked: '/static/liked.svg',
				},
				show: false,

				post: {},
				search:false,
				searchValue:'',
				new:1

			}
		},
		onPullDownRefresh() {
			console.log("123")
			this.mescroll.resetUpScroll()
			
			uni.stopPullDownRefresh()
		    uni.reLaunch({
		    	url:'/pages/partner/index'
		    })
		},
		methods: {
		toNav(url) {
			if(url==0)
			uni.navigateTo({

				url: "/pages/partner/pat_1?key=学习&type=1"

			});
			if(url==1)
			uni.navigateTo({
				url: "/pages/partner/pat_1?key=休闲娱乐&type=4"
			});
			if(url==2)
			uni.navigateTo({
				url: "/pages/partner/pat_1?key=旅行&type=3"
			});
			if(url==3)
			uni.navigateTo({

				url: "/pages/partner/pat_1?key=兴趣爱好&type=2"

			});
		},
		
		//      
		 upCallback(page) {
			 console.log(page)
				try {
					if(this.search==true)
					{this.getSearchList(this.page)}
					else{
					// 请求数据列表
				    this.getPostList(this.page)
					}
					// 
					// 设置列表数据
					if (page.num == 1){
						this.postList = [] // 如果是第一页需手动制空列表	
					}

					// console.log(List)
					// this.postList = this.postList.concat(this.List)
					
					 // 追加新数据
					
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态
					this.mescroll.endSuccess(this.postList.length)
					
				} catch (err) {
					console.log(err)
				}
			},
			 onReachBottom() {
				this.page=this.page+1
				        if(this.search==true)
						{this.getSearchList(this.page)}
					else{
						let list =   this.getPostList(this.page)
						}
					},
			getSearchList(page){
				const addList = [];
				// let count=this.getCounter();
				// console.log(count);
				
				this.$H.get('articles/search?pageNum=' + page + '&pageSize=10'+'&label='+this.searchValue).then(res => {
					
					for (let i = 0; i < (res.result.per_page>res.result.last_page?res.result.last_page:res.result.per_page); i++) {
						let newPost = this.getList(res,i);
						
						
						
						addList.push(newPost);
						
					}
					
					this.postList = [...this.postList,...addList]				
					});
			},
			// 拉取帖子列表
			 getPostList(page) {
							const addList = [];
							// let count=this.getCounter();
							// console.log(count);
							
							this.$H.get('articles/queryall?pageNum=' + page + '&pageSize=10').then(res => {
								
								for (let i = 0; i < (res.result.per_page>res.result.last_page?res.result.last_page:res.result.per_page); i++) {
									let newPost = this.getList(res,i);
									
									
									
									addList.push(newPost);
									
								}
								
								this.postList = [...this.postList,...addList]				
								});
									
						
						},
			getList(res,i){
			
							return {
								id: res.result.data[i].id,
								user_id: res.result.data[i].userId,
								avatar: res.result.data[i].avater,
								nickname: res.result.data[i].nickName,
								createTime: res.result.data[i].createTime, 
								title: res.result.data[i].title,
								content: res.result.data[i].content,
								imgList: res.result.data[i].images,
								
								location:res.result.data[i].location,
								imgeUrl: '/static/tab-partner.png',
								
							};
						},
			// 选中贴子
			selectPost(post) {
				
				
				uni.navigateTo({
					url:'/pages/my_page/my_page?id='+post.id
				})
				// this.goto(`../post-detail/post-detail?id=${post.id}`)
			},
			// 长按帖子
			// longpressPost(post) {
			// 	console.log('longpressPost');
			// 	this.showPostMoreActionSheet(post)
			// },
			changeImg(post){
				
				post.imgeUrl="/static/tab-partner-active.png"
				this.show=true
				this.post=post
				
				
				
				
			},
			onsearch(value){
				
				this.search=true
				this.mescroll.resetUpScroll()
				
				uni.stopPullDownRefresh()
			},
			requestChat(){
				
				// this.$H.get('friends/queryFriend?userId='+this.userInfo.id+'&friendId='+this.post.user_id).then(res=>{
				// 	if(res.code ==200){
				// 		this.new=0
				// 		uni.navigateTo({
						
				// 			url:'/pages/contact/chat?new='+this.new+'&username='+this.post.nickname+'&title='+this.post.title+'&content='+this.post.content+'&id='+this.post.user_id+'&firstImg='+this.post.imgList[0]+'&type=0'+'&avatar='+this.post.avatar+'&articleId='+this.post.id
				// 		})
				// 	}
				// 	else{
				// 		console.log(this.new)
				// 		uni.navigateTo({
						
				// 			url:'/pages/contact/chat?new='+this.new+'&username='+this.post.nickname+'&title='+this.post.title+'&content='+this.post.content+'&id='+this.post.user_id+'&firstImg='+this.post.imgList[0]+'&type=0'+'&avatar='+this.post.avatar+'&articleId='+this.post.id
				// 		})
				// 	}
				// })
				uni.navigateTo({
						
				 			url:'/pages/contact/chat?new='+this.new+'&username='+this.post.nickname+'&title='+this.post.title+'&content='+this.post.content+'&id='+this.post.user_id+'&firstImg='+this.post.imgList[0]+'&type=0'+'&avatar='+this.post.avatar+'&articleId='+this.post.id
				 		})
				this.show=false
			
				},
			close(){
				this.show=false
				this.post.imgeUrl="/static/tab-partner.png"
			},
			// 点击帖子中的关注用户
			clickPostFocusUser(post) {
				console.log('clickPostFocusUser');
				uni.showToast({
					title: '关注成功'
				})
			},
			// 点击帖子中的私聊用户
			// clickPostChatUser(post) {
			// 	console.log('clickPostChatUser')
			// 	uni.showToast({
			// 		title: '私聊界面开发中',
			// 		icon: 'none'
			// 	})
			// },
			// // 点击帖子更多
			// clickMore(post) {
			// 	console.log('clickMore');
			// 	this.showPostMoreActionSheet(post)
			// },
			// // 点击分享帖子
			// clickSharePost(post) {
			// 	console.log('clickSharePost');
			// },
			// 点击评论帖子
			// clickCommentPost(post) {
			// 	console.log('clickCommentPost');
			// 	// 建议跳转后自动下滑到评论区
			// 	// this.goto(`../post-detail/post-detail?id=${post.id}&comment=yes`)
			// // },
			// // 点击帖子用户头像
			// clickPostUserAvatar(post) {
			// 	console.log('clickPostUserAvatar');
			// 	// this.goto(`../homepage/homepage?id=${post.user_id}`)
			// },
			// // 点击贴子用户昵称
			// clickPostUserNickname(post) {
			// 	console.log('clickPostUserNickname');
			// 	// this.goto(`../homepage/homepage?id=${post.user_id}`)
			// },
			// // 点赞帖子
			// togglePostLike(post, isLiked) {
			// 	console.log('togglePostLike', isLiked);
			// },

		}
	}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
.top{
	display: flex;
	background-color: blueviolet;
	vertical-align: bottom;
	background-image: url('https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/3d34a5871f844d00971c5004e1a58d2dparttop.jpg');
	background-size: cover;
	height: 400rpx;
	width: 750rpx;
	// position: relative;
	.pai{
// <<<<<<< HEAD
// 		width: 400rpx;
// 		// position: absolute;
// 		top: 40rpx;
// 		left: 30rpx;
// =======
		width: 300rpx;
		// position: absolute;
        padding-top: 40rpx;
		padding-left: 20rpx;

		font-size: 50rpx;
		font-weight: bolder;
		color: white;
		letter-spacing: 10rpx;
	}
	
	// .sou{
	// 	width: 400rpx;
	// 	height: 60rpx;
	// 	border-radius: 40rpx;
	// 	position: absolute;
	// 	left: 300rpx;
	// 	top: 40rpx;
	// 	background-color: rgba(255,255,255,0.5);
	// 	.s{
	// 		// margin: 10rpx;
	// 	   margin-left: 20rpx;
	// 	   margin-top: 5rpx;
	// 		width: 50rpx;
	// 		height: 50rpx;
	// 		background-image: url('/static/sou.png');
	// 		background-size: cover;
	// 		display: inline-block;
	// 	}
	// 	.sear{
	// 		width: 200rpx;
	// 		height: 50rpx;
			
	// 		display: inline-block;
			
			
	// 	}
	// }

}

.navi{
	background: linear-gradient(#fedac4,#fff);
	height: 200rpx;
	padding-bottom: 20rpx;
	.gn-icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			background:linear-gradient(to bottom right,#dff0fc,#fedac4);
			border-radius: 25%;
			border:solid;
			border-width:4rpx;
			border-color:white;
		}
}


	


.customStyle{
	color: #ffdf80;
	font-size: 40rpx;
	
}

</style>
